<template>
  <div class='write'>
    <div class="write-top">
      <el-input placeholder="请输入文章标题" class="ipt" v-model="articesMassage.title"></el-input>
      <div class="btn-all">
        <div class="draft">保存到草稿</div>
        <div class="issue" @click="faBtnF">发布</div>
      </div>
    </div>
      <v-md-editor v-model="articesMassage.content" class="asd" :disabled-menus="[]" @upload-image="handleUploadImage"></v-md-editor>
  </div>

  <div class="suspension" v-if="ifsuspensionRef">
    <div class="suspension-card">
      <ul class="suspension-card-ul">
        <li>
          <h3>
            发布文章
          </h3>
        </li>
        <li class="l1">
          <h5>标题</h5>
          <el-input v-model="articesMassage.title"></el-input>
        </li>
        <li class="l2">
          <span>
            <h5>
              文章类型
            </h5>
          </span>
          <el-select v-model="articesMassage.flag" placeholder="请选择">
            <el-option
              v-for="item in originalRefList"
              :key="item['value']"
              :label="item['label']"
              :value="item['value']">
            </el-option>
          </el-select>
        </li>
        <li class="l2">
          <span>
            <h5>
              文章分类
            </h5>
          </span>
          <el-select v-model="articesMassage.typeId" placeholder="请选择">
            <el-option
              v-for="item in originalRefList2"
              :key="item['value']"
              :label="item['label']"
              :value="item['value']">
            </el-option>
          </el-select>
        </li>
        <li class="l3">
          <div class="out" @click="backF">
            取消
          </div>
          <div class="issue" @click="okBtnF">
            发布
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { error1, succ1, succ2, warning1 } from '../../tool/ElMessageAny'
import { ifNull, ifStringNull } from '../../tool/ifany'
import UseLocalStorage from '../../tool/UseLocalStorage'

// 工具
// 检查
import { 
  IarticesMassage, IoriginalRefList
 } from './esType'
// api
import {
  addAPI
} from '../../api/writeAPI'
import { getBlogByIdAPI, updateArticesAPI } from '../../api/artice'
import { upfile64API } from '../../api/userAPI'

export default defineComponent({
  name: '',
  setup () {
    // 本地存储
    const { localStorageId } = UseLocalStorage()
    // 文章的信息
    const articesMassage: IarticesMassage = reactive({
      // 内容
      content: '',
      // 是否原创
      flag: '',
      // 标题
      title: '',
      // userid
      userId: localStorageId,
      // 图片
      firstPicture: '',
      // 可以评论
      commentable: true,
      // true为发布成功，否则草稿
      published: true,
      // 开启推荐
      recommend: true,
      // 分类的名字
      typeName: '',
      // 是否开启赞赏
      appreciation: true,
      // 分类,
      typeId: ''
    })
    const originalRefList = reactive<IoriginalRefList[]>([
      {
        value: '原创',
        label: '原创'
      }, {
        value: '转载',
        label: '转载'
      }, {
        value: '隐私',
        label: '隐私'
      }
    ])
    const originalRefList2 = reactive<IoriginalRefList[]>([
      {
        value: '1',
        label: 'vue'
      }, {
        value: '2',
        label: 'Spring-Boot'
      }, {
        value: '3',
        label: 'JS'
      }, {
        value: '4',
        label: 'Java'
      }, {
        value: '5',
        label: 'React'
      }, {
        value: '6',
        label: '风景'
      }, {
        value: '7',
        label: '音乐'
      }, {
        value: '8',
        label: '生活'
      }, {
        value: '9',
        label: '数据库'
      }
    ])

    // 是否显示弹窗
    const ifsuspensionRef = ref<Boolean>(false)
    // 判断函数
    const router = useRouter()
    const ifF = (): boolean => {
      if( ifNull(articesMassage.userId) ) {
        warning1('请登录')
        window.localStorage.setItem('articewrite', JSON.stringify({
          content: articesMassage.content,
          title: articesMassage.title
        }))
        router.push('login')
        return false;
      }
      if(ifStringNull(articesMassage.content)) {
        warning1('请填写内容后重试')
        return false;
      }
      if(ifStringNull(articesMassage.title)) {
        warning1('请填写标题后重试')
        return false;
      }
      return true;
    }
    // 发布的按钮
    const faBtnF = (): void => {
      if( !ifF() ) return;
      ifsuspensionRef.value = true
    }
    // 修改文章的变量
    const route = useRoute()
    const xiuId = route.params.id
    // 完成按钮
    const okBtnF = async () => {
      
      if(ifStringNull(articesMassage.flag)) warning1('请选择文章类型');
      if(xiuId) {
        const res = await updateArticesAPI({
          ...articesMassage,
          id: xiuId
        })
        if(res.data.code === 200) {
          router.push({
            name: 'my',
            query: {
              userID: localStorageId,
              type: 'blog'
            }
          })
        }
        return
      }
      const res = await addAPI(articesMassage)
      if (res.data.code === 200) {
        window.localStorage.removeItem('articewrite')
        router.push({
          name: 'my',
          query: {
            userID: localStorageId,
            type: 'blog'
          }
        })
        succ1('发表成功')
        return;
      }
    }
    // 取消按钮
    const backF = (): void => {
      ifsuspensionRef.value = false
    }
    // 修改文章过来!!!!!!!!!!
    
    
    const getblogbyid = async () => {
      const res = await getBlogByIdAPI(xiuId)
      if((await res).data.code === 200) {
        articesMassage.title = res.data.data.title
        articesMassage.content = res.data.data.content
      }
    }
    // 上传图片
    const handleUploadImage = (e:any, insertImage:any, files:any) => {
      let message1 = e.target.files[0]
      let re = new FileReader()
      re.readAsDataURL(message1)
      re.onload = async () => {
        const res = await upfile64API(re.result)
        if (res.data.code === 200) {
          succ2('使用成功')
          console.log(res.data.data)
          articesMassage.content += `![Description](${res.data.data})`
        } else {
          error1('出错')
        }
      }
    }

    onMounted(() => {
      // 原文恢复
      const res = window.localStorage.getItem('articewrite')
      if (res !== null) {
        articesMassage.content = JSON.parse(res).content
        articesMassage.title = JSON.parse(res).title
      }
      if (xiuId) {
        getblogbyid()
      }
      
    })
    return {
      originalRefList,
      ifsuspensionRef,
      articesMassage,
      faBtnF,
      okBtnF,
      backF,
      originalRefList2,
      handleUploadImage
    }
  }
})
</script>

<style lang='scss' scoped>
.write{
  min-width: 1290px;
  min-height: 700px;
}
.asd{
  height: 93vh;
  
}
.write-top{
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 36px;
  .ipt{
    width: 800px;
    font-size: 18px;
    font-weight: 800;
  }
  .btn-all{
    display: flex;
    align-items: center;
    .issue{
      padding: 5px 16px;
      margin-left: 15px;
      border-radius: 30px;
      cursor: pointer;
      border: 1px solid orange;
      background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
      color: #fff;
    }
    .draft{
      cursor: pointer;
      border-radius: 30px;
      padding: 5px 16px;
      border: 1px solid rgb(63, 218, 145);
    }
  }
}


.suspension{
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(104, 104, 104, .4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.suspension-card{
  width: 450px;
  height: 450px;
  padding: 16px;
  border-radius: 5px;
  background-color: #fff;
  .suspension-card-ul{
    .l1{
      display: flex;
      align-items: center;
      gap: 35px;
      margin: 30px 0;
      h5{
        width: 60px;
      }
    }
    .l2{
      display: flex;
      align-items: center;
      gap: 30px;
      margin: 30px 0;
    }
    .l3{
      margin-top: 150px;
      display: flex;
      justify-content: space-between;
      .issue{
        padding: 5px 16px;
        margin-left: 15px;
        border-radius: 30px;
        cursor: pointer;
        border: 1px solid orange;
        background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        color: #fff;
      }
      .out{
        cursor: pointer;
        border-radius: 30px;
        padding: 5px 16px;
        border: 1px solid rgb(63, 218, 145);
      }
    }
  }
}
</style>
